
<template>
  <div>
      <h1>购物车组件</h1>
      <input type="text" v-model="name">
      <h1>{{name}}</h1>
      <!--  -->
      <h1>{{age}}</h1>
      <h1 @click="change">点击改变数据</h1>
  </div>
</template>
<script>
import {ref,defineComponent ,onBeforeMount,onMounted,onBeforeUpdate,onUpdated} from 'vue'
import {onBeforeUnmount,onUnmounted,onRenderTracked,onRenderTriggered} from 'vue'
// vue3 生命周期的改变
// 所有的生命周期前加on
// 在setup取消了 beforeCreate  created的使用
//  用onBeforeUnmount 代替beforeDestroy
// 用onUnmounted 代替了 destroyted 
export default defineComponent({
  setup() {

      // 
      let name=ref("你好")

      // 
      let age=ref(99); //数据
      let change=()=>{ //函数
          age.value+=1;
      }
      onBeforeMount(()=>{ //组件挂载前
        console.log("挂载前")
      })
      onMounted(()=>{ //组件挂载后
           console.log("挂载后")
      })
      onBeforeUpdate(()=>{//组件更新前
          console.log("更新前")
      }) 
      onUpdated(()=>{ //组件更新后
        console.log("更新后")
      })
      onBeforeUnmount(()=>{ //组件销毁前
        console.log("销毁前")
      })
      onUnmounted(()=>{//组件销毁后
         console.log("销毁后")
      })
      // 俩个新增的生命周期 整体的监控 数据和方法等的变化
      // onRenderTracked直译过来就是状态跟踪，它会跟踪页面上所有响应式变量和方法的状态，也就是我们用return返回去的值，它都会跟踪。
      // 只要页面有update的情况，它就会跟踪，然后生成一个event对象，我们通过event对象来查找程序的问题所在。
      
      onRenderTracked((event)=>{
            console.log(event)
      })
      // onRenderTriggered直译过来是状态触发，它不会跟踪每一个值，
      // 而是给你变化值的信息，并且新值和旧值都会给你明确的展示出来。
      onRenderTriggered((newVal)=>{
          console.log(newVal) //监控改变 获取新的值
      })  
    return{
      name,
      age,
      change
    }
  }
})
</script>